<template>
    <el-card>
        <div class="search-bar">
            <el-button type="primary">添加新分类</el-button>
        </div>
        <el-table border row-key="cat_id"
            :data="categories" 
            :tree-props="{children: 'children'}"
        >
            <el-table-column label="序号" type="index" width="60px"></el-table-column>
            <el-table-column label="分类名称" prop="cat_name"></el-table-column>
            <el-table-column label="是否有效">
                <template #default="{row}">
                    <i v-if="row.cat_deleted" class="el-icon-error"></i>
                    <i v-else class="el-icon-success"></i>
                </template>
            </el-table-column>
            <el-table-column label="排序">
                <template #default="{row}">
                    <el-tag :type="tag[row.cat_level]['type']" size="small">{{ tag[row.cat_level]['label'] }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="300px">
                <template #default>
                    <el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[5, 10, 15, 20, 25, 30]"
            :current-page="params.pagenum"
            :page-size="params.pagesize"
            :total="total"
        >
        </el-pagination>
    </el-card>
</template>

<script>
export default {
    data() {
        return {
           params:{
                pagenum:1,
                pagesize:5
            },
            total:0,
            categories:[],
            tag:[
                { type: 'primary', label: '一级' },
                { type: 'success', label: '二级' },
                { type: 'warning', label: '三级' }
            ]
        }
    },
    methods:{
        async findAllCategories(){
            let data = await this.$api.loadCategoriesList(this.params);
            this.categories = data.result;
            this.total = data.total;
        }
    },
    created(){
        this.findAllCategories();
    }
};
</script>

<style lang="less" scoped>
.search-bar {
    margin-bottom: 20px;
    .el-input {
        width: 500px;
        margin-right: 30px;
    }
}
.el-pagination{
    margin-top: 20px;
}
.level-box{
    margin: 0px 30px;
    padding: 10px 0px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: left;
    align-items:center;
    &.a{
        border-top: 1px solid @text-placeholder;
        &:last-child{
            border-bottom: 1px solid @text-placeholder;
        }
    }
    &.b{
        margin: 0px;
        border-bottom: 1px solid @text-placeholder;
        &:last-child{
            border-bottom: none;
        }
    }
    .level-tag{
        margin: 0px 10px 10px 0px;
    }
}
.el-tree::v-deep [role="treeitem"]{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: 4px 0px;
    margin: 2px 0px;
    border: 1px solid #ccc;
    >*{
        flex-grow: 1;
    }   
}
.el-icon-error,.el-icon-success{
    font-size: 24px;
}
.el-icon-error{
    color: @danger;
}
.el-icon-success{
    color: @success;
}
</style>